<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>设置用户角色</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="../js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../style/admin.css" media="all"/>
    <link rel="stylesheet" href="../style/home.css" media="all"/>
    <script src="../js/layui/layui.js"></script>
    <style>
        .layui-form-item .layui-inline {
            padding-right: 0px;
            margin-right: 0px;
        }

        html,
        body {
            background-color: #fff;
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
            border: 0px;
        }
    </style>
</head>
<body>
<div class="" style="padding: 20px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-card pr20" style=" height: 440px">
            <div id="work-transfer"></div>
        </div>
    </div>
</div>
<script>


    layui.use(function () {
        var transfer = layui.transfer;
        var $ = layui.$;
        var form = layui.form;
        var userId = '[[${userId}]]';


        form.render();


        openUserRole();

        function openUserRole() {
            $.ajax({
                url: '../system/getUserRole?userId=' + userId, //url
                dataType: 'json', //数据格式
                type: 'GET', //请求方式
                async: false, //是否异步请求
                success: function (result) {
                    if (result.code === 0) {
                        transfer.render({
                            elem: '#work-transfer'
                            , title: ['待选择角色', '已选择角色']
                            , height: 400
                            , data: result.data[0]
                            , value: result.data[1]
                            , id: 'transfer' //定义索引
                            , onchange: function (data, index) {
                                let pData = {
                                    userId: userId,
                                    data: data,
                                    action: index
                                }
                                $.ajax({
                                    url: './saveUserRole', //url
                                    dataType: 'json', //数据格式
                                    contentType: "application/json;charset:utf-8",
                                    type: 'POST', //请求方式
                                    async: false, //是否异步请求
                                    data: JSON.stringify(pData),
                                    success: function (result) {
                                        if (result.code !== 0) {
                                            transfer.reload('transfer', {});
                                            parent.layer.alert(result.message, {icon: 2});
                                        }
                                    },
                                    error: function () {
                                        transfer.reload('transfer', {});
                                    }
                                });
                                return false;
                            }
                        });
                    }
                }
            });
        }

    });
</script>
</body>
</html>